<template>
    <div class="bigBox" v-show="!showDetail">
        <div class="body">
            <Select :types="types" @getData="changeType"></Select>
            <div class="imgs">
                <ImgList :imgList="imgList" @viewPicture="viewPicture" v-if="type != 'pc'" :mobile="true"
                    :loading="loading"></ImgList>
                <ImgList :imgList="imgList" @viewPicture="viewPicture" v-else :mobile="false" :loading="loading">
                </ImgList>
            </div>
        </div>
    </div>
    <Detail v-if="showDetail" @closePicture="closePicture" :urls="imgList" :index="index">
    </Detail>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { getMoeImg } from '@renderer/api/mohu'
import ImgList from '@renderer/components/imgList.vue'
import Detail from '@renderer/components/detail.vue'
import _ from 'lodash'
import Select from '@renderer/components/select.vue'
const loading = ref(false)
const types: any = ref([
    { label: '全部', value: 'random' },
    { label: '过审', value: 'approve' },
    { label: '精选', value: 'top' },
    { label: '兽耳', value: 'cat' },
    { label: '银发', value: 'yin' },
    { label: '竖屏', value: 'mp' },
    { label: '横屏', value: 'pc' },
    { label: '点兔', value: 'tuzi' },
])

const type = ref('random')
const imgList: any = ref([])
const index = ref(0)
const showDetail = ref(false)
let ImgBody: Element
// 判断是否存在
const imgSet = new Set()


const changeType = (newType: string) => {
    if (type.value == newType) return
    type.value = newType
    imgList.value = []
    getNetImgList()
}

const getNetImgList = async () => {
    loading.value = true
    const obj = {
        sort: type.value,
        type: 'json',
        num: '30',
        //thumbnail: 'large', // large medium small
    }
    const res = await getMoeImg(obj)
    res.pic.forEach(el => {
        // 判断是否已经存在
        if (imgSet.has(el)) return
        const obj1 = {
            src: el + '?thumbnail=large',
            source: el,
            title: ''
        }
        imgList.value.push(obj1)

        imgSet.add(el)
    })

    loading.value = false
}


const viewPicture = (num: number) => {
    index.value = num
    showDetail.value = true
}
const closePicture = () => {
    showDetail.value = false
}
const scrollEvent = _.debounce(() => {
    const scrollBottom = ImgBody.scrollHeight - ImgBody.scrollTop - ImgBody.clientHeight
    if (scrollBottom < 200) {
        getNetImgList()
    }
}, 200)
onMounted(() => {
    getNetImgList()
    ImgBody = document.querySelector('.imgs')!
    ImgBody.addEventListener('scroll', scrollEvent)
})
onBeforeUnmount(() => {
    ImgBody.removeEventListener('scroll', scrollEvent)
})
</script>

<style scoped lang="scss">
.bigBox {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;

    .body {
        width: 100%;
        height: 100vh;
        display: grid;
        grid-template-columns: 70px 1fr;
        gap: 5px;

        .types {
            overflow-y: auto;

            .type {
                text-align: center;
                cursor: pointer;
                margin-top: 5px;
                transition: all 0.3s;
                user-select: none;

                &:hover {
                    background-color: #29f;
                    color: white;
                }
            }

            .active {
                background-color: #29f;
                color: white;
            }
        }

        .imgs {
            overflow-y: auto;
            @include mixin.scroll_bar();
        }
    }
}
</style>